@import "../../variable.less";
.@{prefix} {
  &-resource-panel {
    min-width: 480px;
    width: 100%;
    &-content {
      max-height: 800px;
      overflow: auto;
    }
    &-list {
      display: flex;
      flex-flow: column;
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0;
      }
      &-icon {
        margin-left: 4px;
        font-size: var(--font-size-base);
        border: 1px solid var(--border-color);
        border-radius: 2px;
      }
      &-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
        &-text {
          font-size: var(--font-size-large);
          color: var(--text-color);
        }
      }
      &-content {
        font-size: var(--font-size-base);
        display: grid;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
      }
      &-item {
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-base);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 0 10px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
        &-text {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-color);
        }
        &.selected {
          border: 1px solid var(--primary-color);
          .@{prefix}-resource-panel-list-item-text {
            color: var(--primary-color);
          }
          .@{prefix}-resource-panel-list-icon {
            color: var(--primary-color);
          }
          .@{prefix}-resource-panel-list-icon {
            border-color: var(--primary-color);
          }
        }
      }
    }
    &-filter {
      width: 300px;
      max-width: 360px;
      &-title {
        background-color: #fff;
        border-bottom: 1px solid var(--border-color);
        &-text {
          font-size: var(--font-size-base);
          color: var(--text-color);
        }
      }
      &-box {
        background-color: #fff;
      }
      &-content {
        display: flex;
        flex-flow: column;
        &-list {
          padding: 12px 0;
          display: flex;
          flex-wrap: wrap;
          border-bottom: 1px solid var(--border-color);
          &:last-child {
            padding-bottom: 0;
            border-bottom: 0;
          }
          &:first-child {
            padding-top: 0;
          }
          &-item {
            margin-right: 10px;
            cursor: pointer;
            font-size: var(--font-size-base);
            color: var(--text-color);
            &:hover {
              opacity: 0.8;
            }
            &.selected {
              color: var(--primary-color);
            }
          }
        }
      }
    }
  }
}